<template>
	<view class="container">
		<view class="modal show" @touchmove.stop.prevent="() => false" v-for="(item,i) in list" :key="i"
			@click="onConfirmClicks">
			<view class="my-post" :style="{ width: '750rpx', height: '885rpx' }">
				<image class="bg" @click="togo(item.jumpAddress)" :src="imgPath+item.picture"
					:style="{ width: '618rpx', height: '778rpx' }" mode="aspectFit"></image>
				<image @click="onConfirmClicks($event,i)" class="close"
					src="https://images.linglinggong.net/static/07.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				imgPath: '',
				isShowPost: '',
			}
		},
		props: {
			showMask: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			this.getPash()
		},
		watch: {
			'showMask': {
				handler(n, o) {
					this.list = n
				},
			}
		},
		methods: {
			getPash() {
				this.imgPath = uni.getStorageSync('imgPath')
			},
			//去周冲
			togo(e) {
				uni.setStorageSync('showMask', [])
				this.isShowPost = 'none'
				uni.navigateTo({
					url: e,
				})
			},
			// 海报点击x，取消
			onConfirmClicks(e, l) {
				uni.setStorageSync('showMask', [])
				this.list.forEach((v, i) => {
					if (i == l) {
						this.list.splice(i, 1)
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.container {
		&>.modal {
			width: 100vw;
			height: calc(100vh - var(--status-bar-height) + 192rpx);
			pointer-events: none;
			position: fixed;
			top: 0;
			padding-top: calc(var(--status-bar-height) + 16rpx);
			z-index: 3333;
			background-color: #FFFFFF;

			&.show {
				display: flex;
				width: 100%;
				height: 100%;
				top: 0rpx;
				background: rgba(0, 0, 0, 0.20);
				pointer-events: auto;
				text-align: center;
				z-index: 9999;
			}

			.my-post {
				border-radius: 10rpx;
				position: absolute;
				top: 0rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				.bg {
					width: 400rpx;
					height: 400rpx;
					display: inline-block;
					border-radius: 10rpx;
					overflow: hidden;
					will-change: transform
				}
			}

			.close {
				position: absolute;
				left: 24rpx;
				top: -20rpx;
				width: 52rpx;
				height: 52rpx;
				z-index: 111;
			}
		}
	}
</style>